<template>
	<div class="musicBox" :style="{paddingBottom:showBar?'50px':''}">
		  <p>歌曲列表</p>
		  <div class="listBox"  v-for="(item,index) in songName" :key="index"  @click="transmit(item.id,index)">
			<div class="arrBox"><p>{{index+1}}</p></div>
			<div class="singnameBox">
				<p>{{item.name}}</p>
				<p class="textName">{{item.ar[0].name}} - {{item.al.name}}</p>
			</div>
			<div class="icBox">
				<div><i class="iconfont" :class="playingIndex==index? 'icon-zanting':'icon-bofang'"></i></div>
			</div>
		  </div>
	</div>
</template>

<script>
	export default{
	 		props:['songData','playList'],
			data(){
				return{
					songName:[],
					idName:[],
					idVaule:'',
					lrcTime:[],
					lrcStr:[],
				}
			},
			methods:{
				// ceshi(){
				// 	console.log(1)
				// },
				getBack(){
					this.$router.go(-1)
				},
				transmit(id,index){
					let audioSrc = `https://music.163.com/song/media/outer/url?id=${id}.mp3`
					this.audio.transmit(audioSrc)
					
					this.axios({
						url:'/song/detail'+`?ids=${id}`
					}).then(res=>{
						console.log(res.data.songs)
						this.$store.commit("setCurrentSong",res.data.songs[0])
					})
					this.$store.commit("playListState",this.playList)
					this.$store.commit("setPlayingIndex",index)
					
					let playList = this.$store.state.playList;
					let playingIndex = this.$store.state.playingIndex;
					
					this.axios({
						url:'https://api.imjad.cn/cloudmusic/?type=lyric&id=' + playList[playingIndex]
					}).then(res=>{
						console.log(res)
						// let arrLyric = [];
						// this.lyric = res.data.lrc.lyric;
						// arrLyric.push(this.lyric.slice("\r\n"));
						// console.log(this.lyric)
						// console.log(arrLyric)
						this.lrcTime = [];
						this.lrcStr = [];
						let lrc = res.data.lrc.lyric.split("\n");
						lrc.pop(1);
						let reg = /^(\[.*\])(.*)$/;
						// window.console.log(lrc);
						lrc.forEach((val)=>{           
							let valres = reg.exec(val);
							if(!valres){return;}
							this.lrcTime.push(valres[1]);
							this.lrcStr.push(valres[2]);
						});
						console.log(this.lrcTime,this.lrcStr)
						this.$store.commit("currentLyric",this.lrcStr)
					})
				}
			},
			created(){
				this.axios({
					url:'/playlist/detail?id=' + this.$route.params.songid
				}).then(res=>{
					this.songName = res.data.playlist.tracks;
					this.idName = res.data.playlist.tracks;
				})
			},
			computed:{
				showBar(){
					return this.$store.state.currentSong.al.id
				},
				playingIndex(){
					return this.$store.state.playingIndex
				}
			}
		}
	</script>
</script>

<style lang="scss" scoped>
	.musicBox{
		border-radius: 20px 20px 0 0;
		>p{
			height: 23px;
			line-height: 23px;
			padding: 0 15px;
			font-size: 12px;
			color: #666;
			background-color: #eeeff0;
			text-align: left;
		}
	}
	.listBox{
		display: flex;
		align-items: center;
		padding: 7px 20px;
		border-bottom: 1px solid ghostwhite;
		.singnameBox{
			width: 88%;
			text-align: left;
			padding-left: 16px;
			>p:first-child{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis
			}
		}
		.textName{
			font-size: 12px;
			color: darkgray;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis
		}
		.icBox{
			display: flex;
			align-items: center;
			position: absolute;
			right: 20px;
			>div:first-child{
				width: 20px;
				>i{
					font-size: 22px;
					color: silver;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
